<template>
    <u-popup :show="show" @close="close" mode="bottom" :round="10" :closeable="false">
        <view @touchmove.prevent.stop class="popup-common ">
            <view class="title bg-[#1AAD19] text-[#fff] pl-[36rpx] flex items-center " style="text-align: left;">
                <image class="w-[40rpx] h-[40rpx] mr-[10rpx]"
                    src="https://files.meton.vip/5834cb89e15905795429a4a899629eee64eada37eb7f121a430a81ffae50955d.png">
                </image> 用户{{ title }}安全验证
            </view>

            <scroll-view scroll-y="true" class="h-[60vh] ">
                <view class="bg-[#1AAD19] h-[100%]">
                    <view
                        class="flex flex-col  mx-[20rpx] bg-[#fff] justify-center rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]">
                        <view class="text-[32rpx] font-bold" v-if="currentVerificationMode == 'password'">请输入{{
                            nickNameFormat(memeberInfo?.nickname ? memeberInfo?.nickname : '') }}的消费密码
                        </view>
                        <view v-if="currentVerificationMode == 'smsCode'" class="flex justify-between">
                            <view class="text-[32rpx] font-bold">请输入{{
                                mobileHide(memeberInfo?.mobile ? memeberInfo?.mobile : '') }}的验证码
                            </view>
                            <view class="text-[32rpx]"><sms-code :mobile="memeberInfo?.mobile" type="consume"
                                    v-model="mobile_key" :isDefaultFont="false" class="text-[32rpx]!"></sms-code></view>
                        </view>
                        <view v-if="currentVerificationMode == 'memberCode'" class="flex justify-between">
                            <view class="text-[32rpx] font-bold">请输入{{
                                nickNameFormat(memeberInfo?.nickname ? memeberInfo?.nickname : '') }}的会员码
                            </view>
                            <!--  #ifndef  H5 -->

                            <view class="text-[32rpx]" v-if="isScan" @click="isScan = false">
                                <!-- 扫码 -->

                                <text class="text-[32rpx] text-[var(--text-color-light6)] ml-[8rpx]"> 手动输入会员码</text>
                            </view>
                            <view class="text-[32rpx]" v-if="!isScan" @click="isScan = true">
                                <!-- 扫码 -->

                                <text class="text-[32rpx] text-[var(--text-color-light6)] ml-[8rpx]"> 扫描会员码</text>
                            </view>
                            <!-- #endif -->


                        </view>



                        <template v-if="!isScan">
                            <view class="flex items-center py-[30rpx] justify-center w-[100%]"
                                v-if="currentVerificationMode == 'password'">
                                <u-code-input v-model="passowrd" :maxlength="6" :space="0" dot borderColor="#1AAD19"
                                    size="55" disabled-keyboard></u-code-input>
                            </view>
                            <view class="flex items-center py-[30rpx] justify-center w-[100%]" v-else>
                                <u-code-input v-model="passowrd" :maxlength="6" :space="0" borderColor="#1AAD19"
                                    size="55" disabled-keyboard></u-code-input>
                            </view>
                        </template>

                        <view v-else class="flex items-center py-[30rpx]   justify-center">
                            <!-- 扫码 -->
                            <!--  #ifndef  H5 -->
                            <view class="text-[32rpx]" @click="handelScan">
                                <!-- 扫码 -->
                                <image :src="'https://files.meton.vip/ed1cb395ee822eadaab455f3cc8676eb.png'"
                                    class="w-[180rpx] h-[180rpx] rounded-[var(--rounded-mid)]"></image>

                            </view>
                            <!-- #endif -->
                            <!--  #ifdef  H5 -->
                            <view class="text-[32rpx]">
                                <u-code-input v-model="passowrd" :maxlength="6" :space="0" borderColor="#1AAD19"
                                    size="55" disabled-keyboard></u-code-input>
                            </view>
                            <!-- #endif -->



                        </view>
                        <view class="flex  justify-end" v-if="currentVerificationMode == 'password'">
                            <view class="text-[32rpx] mr-[20rpx]" @click="handleChangeMode('smsCode')">验证码验证</view>
                            <view class="text-[32rpx]" @click="handleChangeMode('memberCode')">会员码验证</view>
                        </view>
                        <view class="flex  justify-end" v-if="currentVerificationMode == 'smsCode'">
                            <view class="text-[32rpx] mr-[20rpx]" @click="handleChangeMode('password')">消费密码验证</view>
                            <view class="text-[32rpx] " @click="handleChangeMode('memberCode')">会员码验证</view>


                        </view>
                        <view class="flex  justify-end" v-if="currentVerificationMode == 'memberCode'">
                            <view class="text-[32rpx] mr-[20rpx]" @click="handleChangeMode('smsCode')">验证码验证</view>
                            <view class="text-[32rpx] " @click="handleChangeMode('password')">消费密码验证</view>
                        </view>

                    </view>

                </view>

                <u-keyboard mode="number" @change="valChange" @backspace="backspace" :overlay="false" :showTips="false"
                    :tooltip="false" safeAreaInsetBottom :show="show" class="keyboard-common">
                </u-keyboard>


            </scroll-view>
            <view class="btn-wrap">
                &nbsp;
                <!-- <button class="primary-btn-bg btn" @click="confirm">确认</button> -->
            </view>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { authCodeCreate } from '@/app/api/auth'

import { nickNameFormat } from '@/utils/formatting';
import { mobileHide, redirect } from '@/utils/common'

const show = ref(false)
const passowrd = ref<any>('')
const mobile_key = ref<any>('')
const emits = defineEmits(['confirm'])
const currentVerificationMode = ref<any>('password')
const verificationMode = ref<any>({
    password: {
        type: 'password',
        title: '消费密码',
        scene: 1

    },
    memberCode: {
        type: 'memberCode',
        title: '会员码',
        scene: 3

    },
    smsCode: {
        type: 'smsCode',
        title: '验证码',
        scene: 2
    }
})
const isScan = ref(false)
const title = computed(() => {
    console.log(verificationMode.value)
    return verificationMode.value[currentVerificationMode.value].title
})
const handleChangeMode = (type: any) => {
    currentVerificationMode.value = type
    if (type == 'memberCode') {
        isScan.value = true
    } else {
        isScan.value = false

    }
    passowrd.value = ''
}
/**
 * 扫码支付
 */
const handelScan = () => {

    // 调起条码扫描
    uni.scanCode({
        scanType: ['qrCode'],
        onlyFromCamera: true,
        success: function (res) {
            console.log('条码类型：' + res.scanType);
            console.log('条码内容：' + res.result);
            passowrd.value = res.result
        }
    });
}
const valChange = (val: any) => {
    // 将每次按键的值拼接到value变量中，注意+=写法
    if (passowrd.value && passowrd.value != '' && passowrd.value.length == 6) {
        return
    }
    passowrd.value += val;


};

const backspace = () => {
    // 删除value的最后一个字符
    if (passowrd.value.length) {
        passowrd.value = passowrd.value.substr(0, passowrd.value.length - 1);
    }
};


watch(() => passowrd.value, () => {

    if (passowrd.value && passowrd.value != '' && passowrd.value.length == 6) {
        let params = {
            scene: verificationMode.value[currentVerificationMode.value].scene,
            code: passowrd.value
        }
        confirm(params)
    }
})

const close = () => {
    show.value = false

    passowrd.value = ''

}
const memeberInfo = ref()
const open = () => {
    show.value = true

    passowrd.value = ''
    memeberInfo.value = uni.getStorageSync('wapShopMember')

}




const confirm = (params: any) => {

    authCodeCreate(params).then((res: any) => {
        emits('confirm', res.data)
        passowrd.value = ''
        show.value = false
    })

}

defineExpose({
    open,
    confirm,
    passowrd,

})
</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'shared'
    }
}  
</script>
<style lang="scss" scoped>
	:deep(.u-code-input) {
		justify-content: space-between;
	}

// #ifdef H5

.keyboard-common {

    ::v-deep .u-popup__content,
    .u-popup .u-slide-up-enter-to .u-popup__content {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        overflow: hidden;
    }
}

//  #endif
// #ifdef MP-WEIXIN


::v-deep .u-popup__content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow: hidden;
}

//  #endif


::v-deep .u-keyboard {
    // background-color: #fff;

    .u-keyboard {
        // border: 2rpx solid #f6f6f6;
        padding: 0rpx;

        .u-keyboard__button-wrapper {
            border: none;
            box-shadow: none;
            margin: 0;
            padding: 2rpx;
            border-radius: 0rpx;
            box-sizing: border-box;
            width: 250rpx;

            .u-keyboard__button-wrapper__button {
                width: 100%;
                height: 110rpx;
                background: #fff;
                border-radius: 0rpx;

                .u-keyboard__button-wrapper__button__text {
                    font-size: 44rpx;
                    font-weight: bold;
                }

            }

            &:last-child {
                .u-keyboard__button-wrapper__button {
                    background: transparent;
                }
            }

            &:nth-last-child(3) {
                .u-keyboard__button-wrapper__button {
                    display: none;
                }
            }

        }


    }

}
</style>
